<template>
  <div id="mobileapp" class="app">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="h_l">
      <div class="sign-in">
        <el-button v-if="signData.isSignIn" type="success" disabled round size="mini">已签到</el-button>
        <el-button v-else type="primary" icon="el-icon-edit" round size="mini" @click="signIn">签到</el-button>
        <div>
          岗&nbsp;&nbsp;位:
          <span>{{ signData.post }}</span>
        </div>
        <div>
          工&nbsp;&nbsp;序:
          <span>{{ signData.process }}</span>
        </div>
        <div>
          责任人:
          <span>{{ signData.responsible }}</span>
        </div>
        <div v-if="signData.isSignIn">
          签到时间:
          <span>{{ signData.signInTime }}</span>
        </div>
        <div>
          今日任务工时:
          <span>{{ signData.workingHours }}</span>
        </div>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>负载状态</span>
        </div>
        <div class="echarts-div">
          <el-progress
            type="circle"
            :show-text="false"
            color="#70C989"
            :stroke-width="10"
            :percentage="loadData.equipmentLoad"
          />
          <el-progress
            class="echarts-xiao"
            type="circle"
            :show-text="false"
            color="#F6AB17"
            :stroke-width="10"
            :width="90"
            :percentage="loadData.postLoad"
          />
          <div class="echarts-div-la">
            <i class="el-icon-refresh-right" />
            岗位负载：
            <span>{{ loadData.postLoad }}%</span>
          </div>
          <div class="echarts-div-lb">
            <i class="el-icon-refresh-right" />
            设备负载：
            <span>{{ loadData.equipmentLoad }}%</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="h_r">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单信息状况</span>
          <p>
            <b>{{ pageData.currentPage }}</b>
            /{{ pageData.totalPage }}
          </p>
        </div>
        <div>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            stripe
            height="540"
            style="width: 100%;font-size:12px;"
          >
            <el-table-column align="center" prop="id" label="生产批次号" />
            <el-table-column align="center" prop="order" label="生产订单" />
            <el-table-column align="center" prop="starTime" label="开始时间" />
            <el-table-column align="center" prop="endTime" label="结束时间" />
            <el-table-column align="center" prop="statusa" label="设备运行状态" width="100">
              <template slot-scope="scope">
                <span :style="scope.row.statusa==='故障'?'color:red':''">{{ scope.row.statusa }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="userName" label="加工标准" width="80">
              <template>
                <el-button size="mini" round type="primary" plain @click="dialogVisible=true">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="statusb" label="状态" width="80">
              <template slot-scope="scope">
                <span :style="statusbColor(scope.row.statusb)">{{ scope.row.statusb }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="date" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.statusb==='正在运行'"
                  type="primary"
                  round
                  plain
                  size="mini"
                  @click="dialogVisible=true"
                >确认完成</el-button>
                <el-button
                  v-else-if="scope.row.statusb==='故障'"
                  type="danger"
                  round
                  plain
                  size="mini"
                  @click="dialogVisible=true"
                >上报</el-button>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <p v-if="hasNaxtPage" style="text-align: center;margin-bottom: 0;">
            <i style="transform: rotate(-90deg);" class="el-icon-d-arrow-right" />上拉加载
          </p>
        </div>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getList, signIn, getInfo, getLoadData } from "@/api/mobile";

export default {
  name: "Mobile",
  data() {
    return {
      tableData: [],
      tableData2: [],
      listLoading: true,
      listLoading2: true,
      signData: {
        post: "四面刨",
        process: "选料",
        responsible: "张三",
        workingHours: 16,
        isSignIn: false,
        signInTime: ""
      },
      loadData: {
        postLoad: 80,
        equipmentLoad: 60
      },
      signInTime: "",
      activeName: "first",
      dialogVisible: false,
      hasNaxtPage: false,
      pageData: {}
    };
  },
  computed: {
    ...mapGetters(["name"])
  },
  // watch: {
  //   activeName(val) {
  //     if (val === 'second') {
  //       const el = document.getElementsByClassName('el-table__body-wrapper')[1]
  //       this.scrolla(el)
  //     }
  //   }
  // },
  created() {
    getLoadData().then(response => {
      if (response.success) {
        this.loadData = response.data;
      } else {
        this.$message.error(response.message);
      }
    });
    getInfo().then(response => {
      if (response.success) {
        this.signData = response.data;
      } else {
        this.$message.error(response.message);
      }
    });
    this.initData();
  },
  mounted() {
    const el = document.getElementsByClassName("el-table__body-wrapper")[0];
    el.addEventListener("scroll", () => {
      this.scrolla(el);
    });
    // console.log(document.getElementsByClassName('el-table__body-wrapper')[1])
    // setTimeout(() => {
    //   this.scrolla(el)
    // }, 1000)
    const appel = document.getElementById("mobileapp");
    appel.style.height = window.screen.height - 70 + "px";
  },
  methods: {
    statuscColor(val) {
      if (val === "未领取") {
        return "color:#ccc";
      } else if (val === "准备中") {
        return "color:#FDA235";
      } else {
        return "";
      }
    },
    signIn() {
      signIn().then(response => {
        if (response.success) {
          this.signData.signInTime = response.data.time;
          this.signData.isSignIn = true;
        } else {
          this.$message.error(response.message);
        }
      });
    },
    scrolla(el) {
      const _h = el.offsetHeight;
      console.log(_h);
      const _th = el.getElementsByTagName("table")[0].offsetHeight;
      // const _trh = el
      //   .getElementsByTagName('table')[0]
      //   .getElementsByTagName('tbody')[0]
      //   .getElementsByTagName('tr')[0].offsetHeight
      const _stop = el.scrollTop;
      //   setInterval(() => {
      //     const _stop = el.scrollTop
      //     if (_stop >= _th - _h) {
      //       // el.scrollTop = 0;
      //       this.ScrollTop(0, el, 500)
      //     } else {
      //       // el.scrollTop += _trh;
      //       this.ScrollTop((el.scrollTop + _trh), el, 500)
      //     }
      //     console.log(_h, _stop, _trh)
      //   }, 3000)
      if (_stop >= _th - _h && this.hasNaxtPage) {
        getList().then(response => {
          if (response.success) {
            this.tableData = [...this.tableData, ...response.data.list];
            this.hasNaxtPage = response.data.pageData.hasNaxtPage;
            this.pageData = response.data.pageData;
          } else {
            this.$message.error(response.message);
          }
        });
      }
    },
    ScrollTop(number = 0, el, time) {
      if (!time) {
        document.body.scrollTop = el.scrollTop = number;
        return number;
      }
      const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
      let spacingInex = time / spacingTime; // 计算循环的次数
      let nowTop = el.scrollTop; // 获取当前滚动条位置
      const everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
      const scrollTimer = setInterval(() => {
        if (spacingInex > 0) {
          spacingInex--;
          this.ScrollTop((nowTop += everTop), el);
        } else {
          clearInterval(scrollTimer); // 清除计时器
        }
      }, spacingTime);
    },
    statusbColor(val) {
      if (val === "等待") {
        return "color:#ccc";
      }
      if (val === "故障") {
        return "color:red";
      }
      if (val === "正在运行") {
        return "color:#4CA666";
      }
    },
    initData() {
      this.listLoading = true;
      getList().then(response => {
        if (response.success) {
          this.tableData = response.data.list;
          this.hasNaxtPage = response.data.pageData.hasNaxtPage;
          this.pageData = response.data.pageData;
          this.listLoading = false;
        } else {
          this.$message.error(response.message);
        }
      });
      // this.listLoading2 = true
      // getList2().then(response => {
      //   this.tableData2 = response.data.items
      //   this.listLoading2 = false
      // })
    }
  }
};
</script>

<style lang="scss" scoped>
.h_l {
  float: left;
  width: 200px;
  height: 100vh;
  overflow-y: scroll;
  padding: 10px 5px 10px 10px;
  .box-card {
    margin-top: 15px;
  }
  .box-card:first-child {
    margin-top: 0px;
  }
}
.app {
  font-size: 12px;
}
.h_r {
  margin-left: 200px;
  padding: 10px 5px 10px 10px;
}
/deep/ .el-card__header {
  padding: 10px 20px;
  span {
    margin: 5px 0;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    padding-left: 10px;
    border-left: #2b99fa solid 2px;
  }
  p {
    float: right;
    font-size: 14px;
    margin: 0;
    > b {
      font-size: 16px;
      color: #2b99fa;
    }
  }
  a {
    line-height: 22px;
  }
}
/deep/ .el-card__body {
  padding: 0px 10px 20px 10px;
}
.echarts-div {
  width: 100%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  .echarts-xiao {
    width: 80%;
    position: absolute;
    top: 18px;
    left: 36px;
  }
  > div {
    display: inline-block;
    margin-top: 15px;
    text-align: left;
    color: #999;
    span {
      color: #333;
    }
    i {
      font-weight: bold;
    }
  }
  > div.echarts-div-la {
    i {
      color: #f6ab17;
    }
  }
  > div.echarts-div-lb {
    i {
      color: #70c989;
    }
  }
}
.sign-in {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 25px 15px;
  text-align: center;
  > div {
    margin-top: 15px;
    text-align: left;
    color: #999;
    span {
      color: #333;
    }
  }
  > div:last-child {
    span {
      color: #2a9af7;
    }
  }
}
#mobileapp {
  overflow: hidden;
}
/deep/ .el-dialog {
  border-radius: 5px;
}
/deep/ .el-dialog__footer {
  background: #f7f7f7;
  border-radius: 0 0 5px 5px;
}
.main-container {
  height: calc(100% - 70px);
}
</style>
